<script setup lang='ts'>
import { computed } from 'vue'
import { useCart } from '../../composables/useCart'
import { ElMessageBox, ElMessage } from 'element-plus'
import { useAuthStore } from '../../stores/auth'
import { useRouter } from 'vue-router'

const { items, totalPrice, setQuantity, removeFromCart, clearCart } = useCart()
const auth = useAuthStore()
const router = useRouter()

const isEmpty = computed(() => items.value.length === 0)

function handleRemove(id: string | number) {
  removeFromCart(id)
  ElMessage.success('已删除该商品')
}

async function handleClear() {
  try {
    await ElMessageBox.confirm('确定清空购物车吗？', '提示', { type: 'warning' })
    if (!auth.isLoggedIn) {
      ElMessage.warning('请先登录')
      return
    }
    clearCart()
    ElMessage.success('已清空购物车')
  } catch {}
}
</script>

<template>
  <div class='MyCartMain'>
    <div class="MyCart-content-box">
      <div v-if="isEmpty" class="empty">
        购物车空空如也
      </div>
      <div v-else>
        <el-table :data="items" style="width: 100%" size="large" border>
          <el-table-column label="商品" min-width="360">
            <template #default="{ row }">
              <div class="row">
                <img :src="row.product.imgs" class="thumb" />
                <div class="meta">
                  <div class="name">{{ row.product.name }}</div>
                  <div class="price">￥{{ row.product.saleMoney }}</div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="数量" width="180" align="center">
            <template #default="{ row }">
              <el-input-number :min="1" :model-value="row.quantity" @change="(v:number)=> setQuantity(row.product.id, Number(v||1))" />
            </template>
          </el-table-column>
          <el-table-column label="小计" width="140" align="center">
            <template #default="{ row }">
              ￥{{ Number(row.product.saleMoney) * row.quantity }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120" align="center">
            <template #default="{ row }">
              <el-button type="danger" text @click="handleRemove(row.product.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="footer">
          <div class="total">合计：<b>￥{{ totalPrice.toFixed(2) }}</b></div>
          <el-button type="warning" @click="handleClear">清空购物车</el-button>
          <el-button type="primary" @click="()=> router.push('/client/OrderConfirm')">去结算</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.MyCart-content-box{
  width: 97.5%;
  height: 100%;
  margin: 2% auto;
  border-radius: 10px 10px 0 0;
  background-color: aliceblue;
}
.empty{ padding: 60px; text-align: center; color: #888; }
.row{ display: flex; align-items: center; gap: 12px; }
.thumb{ width: 64px; height: 64px; object-fit: cover; border-radius: 6px; }
.meta .name{ font-weight: 600; }
.meta .price{ color: #f56c6c; margin-top: 2px; }
.footer{ display: flex; justify-content: flex-end; align-items: center; gap: 12px; padding: 16px 8px; background: #fff; border-top: 1px solid #ebeef5; margin-top: 12px; border-radius: 0 0 10px 10px; }
.total{ margin-right: auto; padding-left: 8px; }
</style>